<!-- 题目组件 -->
<template>
    <div class='timu-main'>
        <template v-for="(item,index) in timuList">
            <!-- 选择题 -->
            <div class="select-box box" :key="item.id" v-if="item.type=='select'">
                <div class="title">{{index+1}}. {{item.title}}</div>
                <div class="options">
                    <van-radio-group v-model="item.answer" direction="horizontal">
                        <van-radio :name="option.value" v-for="option in item.options" :key="option.value">{{option.label}}</van-radio>
                    </van-radio-group>
                </div>
            </div>
            <!-- 举例题 -->
            <div class="exa-box box" :key="item.id" v-if="item.type=='exa'">
                <div class="title">{{index+1}}. {{item.title}}</div>
                <van-field v-model="item.answer" rows="2" autosize type="textarea" placeholder="请输入" />
            </div>
        </template>
    </div>
</template>

<script>
import { Field, RadioGroup, Radio, Form } from 'vant';
import timuList from "./timu"; //所有题目
export default {
    components: {
        'van-field': Field,
        'van-form': Form,
        'van-radio-group': RadioGroup,
        'van-radio': Radio,
    },
    data() {
        return {
            // 题目   连接符号(&;) 
            timuList: timuList,
        };
    },
    computed: {},
    watch: {},
    methods: {},
    created() { },
    mounted() { },
}
</script>
<style lang="scss" scoped>
// 单选 labe
.timu-main >>> .van-radio__label {
  color: #909090;
}
// 单选  单个选项
.timu-main >>> .van-radio--horizontal {
  width: 47%;
  margin-right: 0;
  margin-bottom: 10px;
}
// 举例题 输入框
.timu-main >>> .van-cell {
  border: 1px solid #eee;
}

.timu-main {
  font-size: 26px;
  .box {
    margin-bottom: 50px;
  }
  // 选择题
  .select-box {
    .title {
    }
    .options {
      margin-top: 15px;
      .item-options {
        .input-item {
        }
        .lable-item {
        }
      }
    }
  }

  // 举例题
  .select-box {
  }
}
</style>